<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.7/vue.min.js"></script>
  <style>
    .btn {
      background: #efefef;
      padding: 1px 5px;
      cursor: pointer;
    }

    .disabled {
      background: none;
    }
  </style>
</head>
<body>
<div id="app">
  <h1>动态修改商品数量的其他方法</h1>
  <table border="1" cellspacing="0" cellpadding="10">
    <thead>
      <tr>
        <th>全选</th>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="goods in goodsList" :key="goods.id">
        <td>
          <input type="checkbox" v-model="goods.checked" />
        </td>
        <td>
          <img :src="'./images/' + goods.img" alt="" width="100" height="100" />
          {{ goods.name }}
        </td>
        <td>
          {{ goods.price }}
        </td>
        <td>
          <sapn class="btn" :class="{disabled: goods.num <= 0 }" @click="decreaseGoods(goods.id)">-</sapn>
          <input type="number" v-model="goods.num" style="width: 40px;" />
          <button @click="goods.num++">+</button>
        </td>
        <td>
          {{ goods.num * goods.price }}
        </td>
        <td>
          <button @click="deleteGoods(goods.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
  <footer>

  </footer>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      title: '添加删除功能',
      goodsList: [
        {
          name: 'Casio/卡西欧 EX-TR350',
          img: 'Casio-1.jpg',
          price: 1,
          num: 1,
          id: Math.random(),
          checked: false,
        },
        {
          name: 'Canon/佳能 powerShotSX50 HS',
          img: 'Canon-2.jpg',
          price: 2,
          num: 1,
          id: Math.random(),
          checked: false,
        },
        {
          name: 'Sony/索尼 DSC-WX300',
          img: 'Sony-3.jpg',
          price: 3,
          num: 1,
          id: Math.random(),
          checked: false,
        },
        {
          name: 'Fujifi1m/富士 instax mini 25',
          img: 'Fujifi1m-4.jpg',
          price: 4,
          num: 1,
          id: Math.random(),
          checked: false,
        },
        {
          name: '康奈尔ssr-p',
          img: 'ssr-5.jpg',
          price: 5,
          num: 1,
          id: Math.random(),
          checked: false,
        },
      ],
    },
    methods: {
      deleteGoods(id) {
        const index = this.goodsList.findIndex(function(goods) {
          return goods.id === id
        })
        this.goodsList.splice(index, 1)
      },

      decreaseGoods(id) {
        const index = this.goodsList.findIndex(function(goods) {
          return goods.id === id
        })
        const goods = this.goodsList[index]
        if (goods.num <= 0) {
          return
        }

        const newGoods = {
          name: goods.name,
          img: goods.img,
          price: goods.price,
          num: --goods.num,
          id: goods.id,
          checked: goods.checked,
        }
        this.goodsList.splice(index, 1, newGoods)
      },
    },
  })
</script>
</body>
</html>